<template>
  <div class="container-fans">
   <el-card>
       <div slot="header">
           <my-bread>粉丝管理</my-bread>
       </div>
        <!-- tabs组件 -->
    <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="粉丝列表" name="list">
     <div class="fans-list">
       <!-- 细节: key只能设置  字符串或者数字 如果是json-bigint转换的对象 .tostring() -->
         <div class="fans-item" v-for="fans in fansList" :key="fans.id.toString()">
           <el-avatar shape="square" :size="80" :src="fans.photo"></el-avatar>
           <p>{{fans.name}}</p>
           <el-button type="primary" plain size="mini">+ 关注</el-button>
         </div>
     </div>
     <!-- 分页 -->
     <el-pagination 
      background 
      layout="prev, pager, next" 
      @current-change="changePager"
      :total="total"
      :page-size="reqParams.per_page"
      :current-page="reqParams.page"
     >
      </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="粉丝画像" name="chart">
      <div ref="dom" style="height:400px; width:600px"></div>
    </el-tab-pane>
  </el-tabs>
   </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name:'fans-page',
  data() {
      return {
         //当前激活的tab选项卡的name属性值   
          activeName:'chart',
          // 粉丝列表
          fansList:[],
          // 总条数
          total:0,
          // 分页参数
          reqParams:{
            page:1,
            per_page:20
          }
      }
  },
  created() {
    this.getFansList()
  },
  mounted() {
    this.initBar()
  },
  methods: {
    // 初始化柱状图
   async initBar(){
     const myChart = echarts.init(this.$refs.dom)
     const option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};
    // 获取统计数据
    const {data:{data}} = await this.$http.get('/statistics/followers')
    // arr1 是x轴刻度,  arr2 是刻度对应的数据
    // console.log(data);
    const arr1 = []; const arr2 = []
    for(const key in data.age){
      arr1.push(key)
      arr2.push(data.age[key])
    }
    console.log(arr1,arr2)
    // 修改option
    option.xAxis[0].data = arr1
    option.series[0].data = arr2
    // 根据option绘制
    myChart.setOption(option)
    },
    // 分页函数
    changePager(np){
       this.reqParams.page = np
       this.getFansList()
      },
    // 获取粉丝列表
    async getFansList(){
     const {data:{data}} = await this.$http.get('/followers',{params:this.reqParams})
     this.fansList = data.results
     this.total = data.total_count
    }
  },
}
</script>

<style scoped lang="less">
// 粉丝列表样式
.fans-list{
    .fans-item{
        width: 100px;
        height: 150px;
        text-align: center;
        border:  1px dashed #ddd;
        padding-top: 5px;
        display: inline-block;
        margin-right: 30px;
        margin-bottom: 20px;
        p{
            margin: 5px 0;
            font-size: 14px;
        }
    }

}
</style>